<template>
  <div class="chart">
    <h2><el-icon><DataAnalysis /></el-icon> 房产交易数据可视化</h2>

    <!-- 租房/买房切换 -->
    <div class="data-type-toggle">
      <el-radio-group v-model="dataType" @change="handleDataTypeChange">
        <el-radio-button label="rent">租房数据</el-radio-button>
        <el-radio-button label="buy">买房数据</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 核心指标卡片 -->
    <div class="card-container">
      <el-card
          v-for="(item, index) in coreMetrics"
          :key="index"
          shadow="hover"
          @click="handleCardClick(item)"
      >
        <div class="metric-card">
          <el-icon class="metric-icon">
            <component :is="item.icon" />
          </el-icon>
          <div class="metric-title">{{ item.title }}</div>
          <div class="metric-value">{{ item.value }}</div>
          <div class="metric-compare" :class="{'positive': item.trend === 'up', 'negative': item.trend === 'down'}">
            {{ item.compare }}
          </div>
        </div>
      </el-card>
    </div>

    <!-- 趋势分析 -->
    <div class="chart-row">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><TrendCharts /></el-icon>
            近6个月{{ dataType === 'rent' ? '租房' : '买房' }}成交趋势
          </div>
        </template>
        <v-chart
            class="chart"
            :option="monthlyTrendOption"
            autoresize
            @click="handleChartClick('monthlyTrend')"
        />
      </el-card>

      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><DataLine /></el-icon>
            {{ dataType === 'rent' ? '租房' : '买房' }}季度同比分析
          </div>
        </template>
        <v-chart
            class="chart"
            :option="quarterCompareOption"
            autoresize
            @click="handleChartClick('quarterCompare')"
        />
      </el-card>
    </div>

    <!-- 房源分布 -->
    <div class="chart-row">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><House /></el-icon>
            {{ dataType === 'rent' ? '租房' : '买房' }}户型占比
          </div>
        </template>
        <v-chart
            class="chart"
            :option="houseTypeOption"
            autoresize
            @click="handleChartClick('houseType')"
        />
      </el-card>

      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><LocationInformation /></el-icon>
            {{ dataType === 'rent' ? '租房' : '买房' }}热门地段排名
          </div>
        </template>
        <v-chart
            class="chart"
            :option="locationOption"
            autoresize
            @click="handleChartClick('location')"
        />
      </el-card>
    </div>

    <!-- 客户分析 -->
    <div class="chart-row">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><User /></el-icon>
            {{ dataType === 'rent' ? '租房' : '买房' }}客户来源分析
          </div>
        </template>
        <v-chart
            class="chart"
            :option="customerSourceOption"
            autoresize
            @click="handleChartClick('customerSource')"
        />
      </el-card>

      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><Money /></el-icon>
            {{ dataType === 'rent' ? '租房' : '买房' }}客户预算分布
          </div>
        </template>
        <v-chart
            class="chart"
            :option="budgetOption"
            autoresize
            @click="handleChartClick('budget')"
        />
      </el-card>
    </div>

    <!-- 租期偏好/购房类型 (根据数据类型显示不同图表) -->
    <div class="chart-row">
      <el-card class="chart-card" shadow="hover" v-if="dataType === 'rent'">
        <template #header>
          <div class="chart-title">
            <el-icon><Calendar /></el-icon>
            租房租期偏好
          </div>
        </template>
        <v-chart
            class="chart"
            :option="leaseTermOption"
            autoresize
            @click="handleChartClick('leaseTerm')"
        />
      </el-card>

      <el-card class="chart-card" shadow="hover" v-if="dataType === 'buy'">
        <template #header>
          <div class="chart-title">
            <el-icon><Sell /></el-icon> <!-- 修改为Sell图标 -->
            购房类型分布
          </div>
        </template>
        <v-chart
            class="chart"
            :option="purchaseTypeOption"
            autoresize
            @click="handleChartClick('purchaseType')"
        />
      </el-card>

      <el-card class="chart-card" shadow="hover" v-if="dataType === 'rent'">
        <template #header>
          <div class="chart-title">
            <el-icon><Warning /></el-icon>
            退租原因分析
          </div>
        </template>
        <v-chart
            class="chart"
            :option="terminationReasonOption"
            autoresize
            @click="handleChartClick('terminationReason')"
        />
      </el-card>

      <el-card class="chart-card" shadow="hover" v-if="dataType === 'buy'">
        <template #header>
          <div class="chart-title">
            <el-icon><Document /></el-icon>
            贷款方式分析
          </div>
        </template>
        <v-chart
            class="chart"
            :option="loanTypeOption"
            autoresize
            @click="handleChartClick('loanType')"
        />
      </el-card>
    </div>

    <!-- 支付统计 -->
    <div class="chart-row">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-title">
            <el-icon><Timer /></el-icon>
            {{ dataType === 'rent' ? '租金' : '房款' }}支付状态分析
          </div>
        </template>
        <v-chart
            class="chart"
            :option="paymentStatusOption"
            autoresize
            @click="handleChartClick('paymentStatus')"
        />
      </el-card>

      <el-card
          class="chart-card"
          shadow="hover"
          @click="handlePaymentClick"
      >
        <template #header>
          <div class="chart-title">
            <el-icon><Coin /></el-icon>
            实收/待收金额
          </div>
        </template>
        <div class="payment-amount">
          <div class="amount-item">
            <span class="label">实收金额</span>
            <span class="value positive">{{ dataType === 'rent' ? '¥58,600' : '¥3,280,000' }}</span>
          </div>
          <div class="amount-item">
            <span class="label">待收金额</span>
            <span class="value negative">{{ dataType === 'rent' ? '¥12,400' : '¥850,000' }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="50%"
    >
      <div v-html="dialogContent"></div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="exportData">导出数据</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import {
  DataAnalysis,
  TrendCharts,
  DataLine,
  House,
  LocationInformation,
  User,
  Money,
  Calendar,
  Warning,
  Timer,
  Coin,
  Sell,
  Aim,
  ArrowUp,
  ArrowDown,
  Document
} from '@element-plus/icons-vue';

// 注册ECharts组件
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent
]);

// 数据类型切换
const dataType = ref('rent');

// 弹窗控制
const dialogVisible = ref(false);
const dialogTitle = ref('');
const dialogContent = ref('');

// 核心指标数据
const coreMetrics = computed(() => {
  return dataType.value === 'rent' ? [
    {
      title: '月度租金收入',
      value: '¥328,500',
      compare: '环比 +15%',
      trend: 'up',
      icon: Sell,
      details: '2023年7月总租金收入为¥328,500，较上月增长15%，主要增长来自静安区的三居室房源。'
    },
    {
      title: '带看转化率',
      value: '32%',
      compare: '行业平均 25%',
      trend: 'up',
      icon: Aim,
      details: '本月带看转化率为32%，高于行业平均水平7个百分点，官网渠道转化率最高达到38%。'
    },
    {
      title: '续约率',
      value: '78%',
      compare: '上月 73%',
      trend: 'up',
      icon: ArrowUp,
      details: '本月续约率78%，较上月提升5个百分点，其中两年期租约续签率最高达到85%。'
    },
    {
      title: '空置率',
      value: '12%',
      compare: '目标 <10%',
      trend: 'down',
      icon: ArrowDown,
      details: '当前空置率12%，超出目标值2个百分点，主要空置房源集中在浦东区的两居室。'
    }
  ] : [
    {
      title: '月度成交额',
      value: '¥8,750,000',
      compare: '环比 +22%',
      trend: 'up',
      icon: Sell,
      details: '2023年7月总成交金额为¥8,750,000，较上月增长22%，主要增长来自学区房交易。'
    },
    {
      title: '带看转化率',
      value: '18%',
      compare: '行业平均 15%',
      trend: 'up',
      icon: Aim,
      details: '本月带看转化率为18%，高于行业平均水平3个百分点，中介渠道转化率最高达到21%。'
    },
    {
      title: '平均成交周期',
      value: '45天',
      compare: '上月 52天',
      trend: 'up',
      icon: ArrowUp,
      details: '本月平均成交周期45天，较上月缩短7天，其中学区房成交最快平均38天。'
    },
    {
      title: '议价空间',
      value: '5.2%',
      compare: '上月 6.8%',
      trend: 'down',
      icon: ArrowDown,
      details: '当前议价空间5.2%，较上月缩小1.6个百分点，市场供需关系趋紧。'
    }
  ];
});

// 处理数据类型切换
const handleDataTypeChange = () => {
  // 这里可以添加数据加载逻辑
};

// 处理卡片点击
const handleCardClick = (item) => {
  dialogTitle.value = item.title + '详情';
  dialogContent.value = `
    <div class="dialog-content">
      <p><strong>当前值:</strong> ${item.value}</p>
      <p><strong>比较:</strong> ${item.compare}</p>
      <p><strong>详细分析:</strong> ${item.details}</p>
      <p><strong>时间:</strong> ${new Date().toLocaleDateString()}</p>
    </div>
  `;
  dialogVisible.value = true;
};

// 处理图表点击
const handleChartClick = (type) => {
  const chartTitles = {
    monthlyTrend: `近6个月${dataType.value === 'rent' ? '租房' : '买房'}成交趋势`,
    quarterCompare: `${dataType.value === 'rent' ? '租房' : '买房'}季度同比分析`,
    houseType: `${dataType.value === 'rent' ? '租房' : '买房'}户型占比分析`,
    location: `${dataType.value === 'rent' ? '租房' : '买房'}热门地段排名`,
    customerSource: `${dataType.value === 'rent' ? '租房' : '买房'}客户来源分析`,
    budget: `${dataType.value === 'rent' ? '租房' : '买房'}客户预算分布`,
    leaseTerm: '租房租期偏好分析',
    purchaseType: '购房类型分布',
    terminationReason: '退租原因分析',
    loanType: '贷款方式分析',
    paymentStatus: `${dataType.value === 'rent' ? '租金' : '房款'}支付状态分析`
  };

  const details = {
    monthlyTrend: dataType.value === 'rent'
        ? '近6个月租房成交金额持续增长，7月达到峰值¥328,500，预计下月将突破¥350,000。'
        : '近6个月买房成交金额稳步上升，7月达到¥8,750,000，学区房交易占比提升明显。',
    quarterCompare: dataType.value === 'rent'
        ? '2023年Q3租房成交额同比增长28%，带看量增长35%，续约率提升6个百分点。'
        : '2023年Q3买房成交额同比增长42%，学区房交易占比达38%，改善型需求增长明显。',
    houseType: dataType.value === 'rent'
        ? '两居室占比最高达45%，其次是一居室35%，三居室占比15%，其他户型5%。'
        : '两居室占比最高达50%，三居室35%，一居室10%，其他5%。学区房三居室需求旺盛。',
    location: dataType.value === 'rent'
        ? '静安区租房占比最高达38%，其次是浦东区32%，徐汇区15%，长宁区10%，黄浦区5%。'
        : '浦东区买房占比最高达45%，其次是静安区30%，闵行区15%，徐汇区8%，其他2%。',
    customerSource: dataType.value === 'rent'
        ? '中介渠道占比42%，官网35%，转介绍18%，其他5%。官网渠道转化率最高。'
        : '中介渠道占比65%，开发商20%，转介绍10%，其他5%。中介渠道成交周期最短。',
    budget: dataType.value === 'rent'
        ? '预算5000-8000元占比最高达55%，3000-5000元占25%，8000元以上15%，3000元以下5%。'
        : '预算500-800万占比最高达45%，300-500万占30%，800万以上20%，300万以下5%。',
    leaseTerm: '1年租期占比60%，6个月25%，2年10%，短租5%。长期租约占比持续上升。',
    purchaseType: '首套房占比55%，改善型30%，投资型10%，其他5%。改善型需求同比增长15%。',
    terminationReason: '工作变动45%，换房升级30%，服务质量15%，其他10%。服务质量问题较上月下降5%。',
    loanType: '商业贷款60%，公积金贷款25%，组合贷款10%，全款5%。公积金贷款占比提升。',
    paymentStatus: dataType.value === 'rent'
        ? '按时支付75%，逾期15-30天7%，逾期30天以上5%，坏账3%。支付健康度良好。'
        : '全款支付20%，首付+按揭75%，分期5%。按揭审批通过率92%。'
  };

  dialogTitle.value = chartTitles[type] + '详情';
  dialogContent.value = `
    <div class="dialog-content">
      <h4>${chartTitles[type]}数据详情</h4>
      <p>${details[type]}</p>
      <el-divider />
      <div class="data-details">
        <p><strong>数据时间范围:</strong> 2023年1月-7月</p>
        <p><strong>数据来源:</strong> 公司CRM系统</p>
        <p><strong>最后更新时间:</strong> ${new Date().toLocaleString()}</p>
      </div>
    </div>
  `;
  dialogVisible.value = true;
};

// 处理支付点击
const handlePaymentClick = () => {
  dialogTitle.value = '实收/待收金额详情';
  dialogContent.value = `
    <div class="dialog-content">
      <h4>7月收款情况</h4>
      <el-descriptions border>
        <el-descriptions-item label="应收总额">${dataType.value === 'rent' ? '¥71,000' : '¥4,130,000'}</el-descriptions-item>
        <el-descriptions-item label="实收金额" class="positive">${dataType.value === 'rent' ? '¥58,600 (82.5%)' : '¥3,280,000 (79.4%)'}</el-descriptions-item>
        <el-descriptions-item label="待收金额" class="negative">${dataType.value === 'rent' ? '¥12,400 (17.5%)' : '¥850,000 (20.6%)'}</el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <h4>待收明细</h4>
      <el-table :data="${dataType.value === 'rent' ? 'rentPaymentData' : 'buyPaymentData'}" style="width: 100%">
        <el-table-column prop="name" label="客户" width="180" />
        <el-table-column prop="amount" label="金额" width="180" />
        <el-table-column prop="dueDate" label="到期日" />
      </el-table>
    </div>
  `;
  dialogVisible.value = true;
};

// 租房支付数据
const rentPaymentData = [
  { name: '张先生', amount: '¥3,200', dueDate: '2023-07-15' },
  { name: '李女士', amount: '¥2,800', dueDate: '2023-07-20' },
  { name: '王公司', amount: '¥4,500', dueDate: '2023-07-25' },
  { name: '赵小姐', amount: '¥1,900', dueDate: '2023-07-30' }
];

// 买房支付数据
const buyPaymentData = [
  { name: '张先生', amount: '¥350,000', dueDate: '2023-07-30' },
  { name: '李女士', amount: '¥250,000', dueDate: '2023-08-15' },
  { name: '王公司', amount: '¥150,000', dueDate: '2023-08-30' },
  { name: '赵小姐', amount: '¥100,000', dueDate: '2023-09-15' }
];

// 导出数据
const exportData = () => {
  ElMessage.success('数据导出成功！可在"下载管理"中查看');
  dialogVisible.value = false;
};

// 图表配置
const monthlyTrendOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: { data: ['2023年'] },
  grid: {
    left: '3%', right: '4%', bottom: '3%', containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['2月', '3月', '4月', '5月', '6月', '7月']
  },
  yAxis: { type: 'value' },
  series: [{
    name: '2023年',
    type: 'line',
    data: dataType.value === 'rent'
        ? [185000, 210000, 235000, 265000, 285000, 328500]
        : [4850000, 5250000, 5850000, 6750000, 7850000, 8750000],
    smooth: true,
    itemStyle: { color: '#409EFF' },
    emphasis: { focus: 'series' },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ]
      }
    }
  }]
}));

const quarterCompareOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  legend: { data: ['2023 Q3', '2022 Q3'] },
  grid: {
    left: '3%', right: '4%', bottom: '3%', containLabel: true
  },
  xAxis: {
    type: 'category',
    data: dataType.value === 'rent'
        ? ['成交额', '带看量', '续约率']
        : ['成交额', '带看量', '成交周期']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '2023 Q3',
      type: 'bar',
      data: dataType.value === 'rent'
          ? [328500, 185, 78]
          : [8750000, 125, 45],
      itemStyle: { color: '#409EFF' },
      emphasis: { focus: 'series' }
    },
    {
      name: '2022 Q3',
      type: 'bar',
      data: dataType.value === 'rent'
          ? [256000, 137, 68]
          : [6150000, 95, 52],
      itemStyle: { color: '#67C23A' },
      emphasis: { focus: 'series' }
    }
  ]
}));

const houseTypeOption = computed(() => ({
  title: { text: `${dataType.value === 'rent' ? '租房' : '买房'}户型占比`, left: 'center' },
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  legend: {
    orient: 'vertical', left: 'left',
    data: ['一居室', '两居室', '三居室', '其他']
  },
  series: [{
    name: '户型占比',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10, borderColor: '#fff', borderWidth: 2
    },
    label: { show: false, position: 'center' },
    emphasis: {
      label: { show: true, fontSize: '18', fontWeight: 'bold' }
    },
    labelLine: { show: false },
    data: [
      {
        value: dataType.value === 'rent' ? 35 : 10,
        name: '一居室',
        itemStyle: { color: '#409EFF' }
      },
      {
        value: dataType.value === 'rent' ? 45 : 50,
        name: '两居室',
        itemStyle: { color: '#67C23A' }
      },
      {
        value: dataType.value === 'rent' ? 15 : 35,
        name: '三居室',
        itemStyle: { color: '#E6A23C' }
      },
      {
        value: 5,
        name: '其他',
        itemStyle: { color: '#F56C6C' }
      }
    ]
  }]
}));

const locationOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  grid: {
    left: '3%', right: '4%', bottom: '3%', containLabel: true
  },
  xAxis: { type: 'value' },
  yAxis: {
    type: 'category',
    data: dataType.value === 'rent'
        ? ['静安', '浦东', '徐汇', '长宁', '黄浦']
        : ['浦东', '静安', '闵行', '徐汇', '其他']
  },
  series: [{
    name: '成交占比',
    type: 'bar',
    data: dataType.value === 'rent'
        ? [38, 32, 15, 10, 5]
        : [45, 30, 15, 8, 2],
    itemStyle: {
      color: (params) => ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'][params.dataIndex]
    },
    label: {
      show: true,
      position: 'right',
      formatter: '{c}%'
    }
  }]
}));

const customerSourceOption = computed(() => ({
  title: { text: `${dataType.value === 'rent' ? '租房' : '买房'}客户来源分析`, left: 'center' },
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '客户来源',
    type: 'pie',
    radius: '50%',
    data: dataType.value === 'rent'
        ? [
          { value: 42, name: '中介', itemStyle: { color: '#409EFF' } },
          { value: 35, name: '官网', itemStyle: { color: '#67C23A' } },
          { value: 18, name: '转介绍', itemStyle: { color: '#E6A23C' } },
          { value: 5, name: '其他', itemStyle: { color: '#F56C6C' } }
        ]
        : [
          { value: 65, name: '中介', itemStyle: { color: '#409EFF' } },
          { value: 20, name: '开发商', itemStyle: { color: '#67C23A' } },
          { value: 10, name: '转介绍', itemStyle: { color: '#E6A23C' } },
          { value: 5, name: '其他', itemStyle: { color: '#F56C6C' } }
        ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}));

const budgetOption = computed(() => ({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '客户预算',
    type: 'pie',
    radius: ['30%', '70%'],
    roseType: 'radius',
    itemStyle: { borderRadius: 5 },
    label: { show: false },
    emphasis: { label: { show: true } },
    data: dataType.value === 'rent'
        ? [
          { value: 25, name: '¥3000-5000', itemStyle: { color: '#F56C6C' } },
          { value: 55, name: '¥5000-8000', itemStyle: { color: '#E6A23C' } },
          { value: 15, name: '¥8000+', itemStyle: { color: '#67C23A' } },
          { value: 5, name: '<¥3000', itemStyle: { color: '#409EFF' } }
        ]
        : [
          { value: 30, name: '¥300-500万', itemStyle: { color: '#F56C6C' } },
          { value: 45, name: '¥500-800万', itemStyle: { color: '#E6A23C' } },
          { value: 20, name: '¥800万+', itemStyle: { color: '#67C23A' } },
          { value: 5, name: '<¥300万', itemStyle: { color: '#409EFF' } }
        ]
  }]
}));

const leaseTermOption = ref({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  series: [{
    name: '租期偏好',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10, borderColor: '#fff', borderWidth: 2
    },
    label: { show: false, position: 'center' },
    emphasis: {
      label: { show: true, fontSize: '18', fontWeight: 'bold' }
    },
    labelLine: { show: false },
    data: [
      { value: 60, name: '1年', itemStyle: { color: '#409EFF' } },
      { value: 25, name: '6个月', itemStyle: { color: '#67C23A' } },
      { value: 10, name: '2年', itemStyle: { color: '#E6A23C' } },
      { value: 5, name: '短租', itemStyle: { color: '#F56C6C' } }
    ]
  }]
});

const purchaseTypeOption = ref({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  series: [{
    name: '购房类型',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10, borderColor: '#fff', borderWidth: 2
    },
    label: { show: false, position: 'center' },
    emphasis: {
      label: { show: true, fontSize: '18', fontWeight: 'bold' }
    },
    labelLine: { show: false },
    data: [
      { value: 55, name: '首套房', itemStyle: { color: '#409EFF' } },
      { value: 30, name: '改善型', itemStyle: { color: '#67C23A' } },
      { value: 10, name: '投资型', itemStyle: { color: '#E6A23C' } },
      { value: 5, name: '其他', itemStyle: { color: '#F56C6C' } }
    ]
  }]
});

const terminationReasonOption = ref({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  series: [{
    name: '退租原因',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10, borderColor: '#fff', borderWidth: 2
    },
    label: { show: false, position: 'center' },
    emphasis: {
      label: { show: true, fontSize: '18', fontWeight: 'bold' }
    },
    labelLine: { show: false },
    data: [
      { value: 45, name: '工作变动', itemStyle: { color: '#409EFF' } },
      { value: 30, name: '换房升级', itemStyle: { color: '#67C23A' } },
      { value: 15, name: '服务质量', itemStyle: { color: '#E6A23C' } },
      { value: 10, name: '其他', itemStyle: { color: '#F56C6C' } }
    ]
  }]
});

const loanTypeOption = ref({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  series: [{
    name: '贷款方式',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10, borderColor: '#fff', borderWidth: 2
    },
    label: {
      show: true,
      formatter: '{b}: {c} ({d}%)'
    },
    labelLine: { show: true },
    data: [
      { value: 60, name: '商业贷款', itemStyle: { color: '#67C23A' } },
      { value: 25, name: '公积金贷款', itemStyle: { color: '#409EFF' } },
      { value: 10, name: '组合贷款', itemStyle: { color: '#E6A23C' } },
      { value: 5, name: '全款', itemStyle: { color: '#F56C6C' } }
    ]
  }]
});

const paymentStatusOption = computed(() => ({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  series: [{
    name: '支付状态',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10, borderColor: '#fff', borderWidth: 2
    },
    label: {
      show: true,
      formatter: '{b}: {c} ({d}%)'
    },
    labelLine: { show: true },
    data: dataType.value === 'rent'
        ? [
          { value: 75, name: '按时支付', itemStyle: { color: '#67C23A' } },
          { value: 7, name: '逾期15-30天', itemStyle: { color: '#E6A23C' } },
          { value: 5, name: '逾期30天+', itemStyle: { color: '#F56C6C' } },
          { value: 3, name: '坏账', itemStyle: { color: '#909399' } }
        ]
        : [
          { value: 20, name: '全款支付', itemStyle: { color: '#67C23A' } },
          { value: 75, name: '首付+按揭', itemStyle: { color: '#409EFF' } },
          { value: 5, name: '分期', itemStyle: { color: '#E6A23C' } }
        ]
  }]
}));
</script>

<style scoped>
.chart {
  padding: 20px;
  background-color: #f5f7fa;
}

h2 {
  margin-bottom: 20px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
}

.data-type-toggle {
  margin-bottom: 20px;
  text-align: center;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.metric-card {
  text-align: center;
  padding: 20px 0;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-card:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--el-color-primary);
}

.metric-icon {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--el-color-primary);
}

.metric-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.metric-value {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.metric-compare {
  font-size: 14px;
  font-weight: 500;
}

.metric-compare.positive {
  color: #67C23A;
}

.metric-compare.negative {
  color: #F56C6C;
}

.chart-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  height: 420px;
  cursor: pointer;
  transition: all 0.3s;
}

.chart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chart-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.chart {
  height: 370px;
  width: 100%;
}

.payment-amount {
  text-align: center;
  padding: 40px 0;
  cursor: pointer;
}

.amount-item {
  margin: 20px 0;
}

.amount-item .label {
  display: block;
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}

.amount-item .value {
  font-size: 28px;
  font-weight: bold;
}

.amount-item .positive {
  color: #67C23A;
}

.amount-item .negative {
  color: #F56C6C;
}

/* 弹窗样式 */
:deep(.dialog-content) {
  line-height: 1.6;
}

:deep(.dialog-content h4) {
  margin-top: 0;
  color: #333;
}

:deep(.data-details) {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 4px;
  margin-top: 15px;
}

:deep(.positive) {
  color: #67C23A;
}

:deep(.negative) {
  color: #F56C6C;
}
</style>